<template>
	<div class="toast" v-show="show">
		<div class="txt">{{ text }}</div>
	</div>
</template>

<script>
export default {
	props:{
		text:{
			type: String,
			default: ''
		},
		show:{
			type: Boolean,
			default: false
		},
		time:{
			type: Number,
			default: 2000
		}
	},
	watch:{
		show(val){
			if( val ){
				this.$emit('input', val)

				setTimeout( () => {
					this.show = false
				},this.time)
			}
		}
	}
}
</script>


<style lang="scss" scoped>
.toast{width:100%;position: fixed;left:0;top:20px;z-index:300;text-align:center;
	.txt{line-height: 20px;text-align: center;color:white;display: inline-block;background-color: rgba(0,0,0,.7);padding:10px 15px;border-radius:3px;}
}
</style>
